<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-image: url("./img/wallhaven-6dpro6.jpg");
      background-size: cover; /* 背景图片覆盖整个屏幕 */
      background-position: center; /* 居中显示背景图片 */
      height: 100vh; /* 设置body的高度等于浏览器窗口的高度 */
      background-repeat: no-repeat;
      overflow: hidden; /* 禁止页面滚动 */
    }
    .di{
      margin: 0px auto;
      margin-top: 80px;
      width: 500px;
      height: 300px;
    }
    .ht{
      text-align: center;
      color: blue;
      font-family: 宋体;
    }
    .tab{
      width: 500px;
      border: 5px solid rgb(107, 162, 51);
      margin: 0px auto;
      border-radius: 5px;
      font-family: 幼圆;
    }
    .ltr td{
      border: 1px solid rgb(80, 197, 230);
    }
    .ltr th{
      border: 1px solid rgb(80, 197, 230);
    }
    .ipt{
      border: 0px;
      background-color: rgba(255, 255, 255, 0.2)
    }
    .btn1{
      border: 2px solid powderblue;
      border-radius: 4px;
      width:80px;
      background-color: antiquewhite;

    }
    #usernameMsg , #userPwdMsg {
      color: rgb(230, 87, 51);
    }

    .buttonContainer{
      text-align: center;
    }
    span{
      font-size: 10px;
    }

  </style>
  <script>
    function checkUsername(){
      var usernameReg = /^[a-zA-Z0-9]{5,10}$/
      var usernameInput = document.getElementById("usernameInput");
      var username = usernameInput.value
      var usernameMsg = document.getElementById("usernameMsg")
      if(!usernameReg.test(username)){
        usernameMsg.innerText="用户名必须为英文或者数字,长度为5-10位"
        return false
      }
      usernameMsg.innerText = "√"
      return true
    }

    function checkUserPwd(){
      var userPwdReg = /^[a-zA-Z0-9]{0,9}$/
      var userPwdInput = document.getElementById("userPwdInput");
      var userPwd = userPwdInput.value
      var userPwdMsg = document.getElementById("userPwdMsg")
      if(!userPwdReg.test(userPwd)){
        userPwdMsg.innerText="英文或者数字,长度为0-9位"
        return false
      }
      userPwdMsg.innerText = "√"
      return true
    }
    function checkForm(){
      var flag1 = checkUsername()
      var flag2 = checkUserPwd()
      return flag1&&flag2
    }
  </script>
</head>
<body>
<div class="di">
  <h1 class="ht">欢迎使用日程登录管理系统</h1>
  <h2 class="ht">请登录</h2>
  <form action="/user/login" method="post" onsubmit="return checkForm()">
    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <th>
          请输入账号
        </th>
        <td >
          <input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
          <span id="usernameMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <th>
          请输入密码
        </th>
        <td>
          <input class="ipt" type="password" id="userPwdInput"  name="userPwd" onblur="checkUserPwd()">
          <span id="userPwdMsg"></span>
        </td>
      </tr>
      <tr  class="ltr">
        <td colspan="2"  class="buttonContainer">
          <input class="btn1" type="submit" id="dl" value="登录">
          <input class="btn1" type="reset" id="dl" value="重置">
          <button class="btn1"><a href="regist.html">去注册</a></button>

        </td>
      </tr>
    </table>
  </form>

</div>

</body>
</html>